<template>
    <div class="box">
        <van-nav-bar
            title="订单确认"
            class="navBar"
            left-arrow
            @click-left="back()"
            :border="false"
        ></van-nav-bar>
        <div class="order-list">
            <van-cell-group inset v-show="list.length">
                <van-cell v-for="item in list" :key="item.count">
                    <div class="item">
                        <div class="img-wrap">
                            <van-image
                                width="100%"
                                height="100%"
                                fit="fill"
                                :src="item.photoX"
                            />
                        </div>
                        <div class="right-desc">
                            <p>{{ item.name }}</p>
                            <div class="money-item">
                                <span class="title">原价:</span>
                                <span class="price old"
                                    >￥{{ item.price }}</span
                                >
                            </div>
                            <div class="money-item">
                                <span class="title">现价:</span>
                                <span class="price"
                                    >￥{{ item.finalPrice }}</span
                                >
                            </div>
                        </div>
                        <span class="count" v-if="item.count"
                            ><van-icon name="cross" />{{ item.count }}</span
                        >
                    </div>
                </van-cell>

                <van-cell
                    title="总金额:"
                    :value="'￥' + total"
                    :border="false"
                    :title-style="{ color: '#101D34' }"
                    class="money"
                />
                <van-field
                        v-model="state.userPhone"
                        type="phone"
                        name="顾客手机号"
                        label="顾客手机号:"
                        placeholder="套餐卡订单必须填写手机号"
                        :rules="[{ required: true, message: '请输入正确的手机号',pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ }]"
                />
            </van-cell-group>
        </div>
        <footer>
            <van-button
                color="#60348d"
                class="changeCode"
                @click="generateOrder()"
                >生成收款码</van-button
            >
        </footer>
    </div>
</template>
<script setup>
import { onMounted, ref, onBeforeMount, reactive } from "vue";
import { Toast, Dialog } from "vant";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { saveOrder,pay } from "api/goods.js";

const router = useRouter();
const route = useRoute();
const store = useStore();

const back = () => {
    router.back();
};
let state = reactive({
    userPhone : ''
})
const total = ref(0);
const list = ref([
    // {photoX:'https://img.yzcdn.cn/vant/cat.jpeg',name:'雨刷',price:89,cost:15,intro:'可安装商品',count:0},
]);
onMounted(() => {
    let shopcart = store.getters["goods/getShopCart"];
    list.value.push(...shopcart);
    //累加总金额
    total.value = shopcart.reduce((total, current) => {
        //如果是零售商品，则用数量 * 单价
        if (current.count) {
            return total + current.finalPrice * current.count;
        }
        //如果是套餐卡，直接是价格
        return total + current.finalPrice;
    }, 0);
});
const generateOrder = async () => {
    console.log(state.userPhone);
    var userInfo = store.getters["user/users"];
    let formData = new URLSearchParams();
    formData.append("type", 2); //h5员工端
    formData.append("piabjkStatus", route.params.orderType || 0); //是否套餐卡，0否，1是
    formData.append("totalPrice", total.value); //订单金额
    formData.append("storeId", userInfo.storeId); //门店ID
    formData.append("staffName", userInfo.name); //员工姓名
    formData.append("staffNumber", userInfo.staffNo); //员工编号
    formData.append("name", ""); //客户姓名
    formData.append("phone", state.userPhone); //客户手机

    var arr = [];
    list.value.forEach((item) => {
        arr.push({
            pid: item.productId + "",
            price: item.finalPrice,
            num: item.count || 1,
            buff: item.proBuff,
            addtime: item.addtime,
            name: item.name,
            img: item.photoX,
        });
    });
    formData.append("products", JSON.stringify(arr));
    //生成订单
    let res = await saveOrder(formData);
    if(res.data){
        //根据生成的订单号查询微信支付url
        let orderId = res.data.orderId
        console.log("订单号：",res.data)
        let payRes = await pay(orderId)
        console.log("付款地址：",payRes.data.code_url)
        sessionStorage.setItem("code_url",payRes.data.code_url)
        router.push(`/goods/paycode/${res.data.orderSn}`);
    }
};
</script>
<style lang="scss" scoped>
.van-cell-group {
    margin: 0 !important;
}
.box {
    background: #f1f5f8;
    height: 100vh;
    .navBar {
        background: #fff;
        border: none;
    }
}
.order-list {
    padding: 0.9375rem;
    .item {
        display: flex;
        height: 5.9375rem;
        position: relative;
        line-height: 1;
        .img-wrap {
            width: 5.9375rem;
            height: 5.9375rem;
            border-radius: 0.5rem;
            margin-right: 0.4375rem;
            overflow: hidden;
        }
        .right-desc {
            color: #49596d;
            p {
                margin: 0.3125rem 0 1.25rem 0;
                font-size: 0.9375rem;
                color: #101d34;
            }
            .money-item {
                font-size: 0.75rem;
                margin-bottom: 0.625rem;
                .old{
                    text-decoration: line-through;
                }
            }
        }
        .count {
            position: absolute;
            right: 0;
            bottom: 1.875rem;
        }
    }
}
footer {
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 100%;
    color: white;
    height: 90px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px -10px 32px 8px rgba(0, 0, 0, 0.03);
    border-radius: 0.9375rem 0.9375rem 0px 0px;
    padding-top: 0.625rem;
}
</style>
<style scoped>
.box /deep/ .van-ellipsis {
    font-family: PingFang-SC-Bold;
    font-weight: 700;
}
.box /deep/ .van-cell {
    padding: 0.9375rem;
}
.money /deep/ .van-cell__value {
    color: #f13845;
    font-size: 0.875rem;
}
.box /deep/ .van-cell__title {
    text-align: left;
}
.box /deep/ .van-cell.money {
    line-height: 1;
    padding: 1.1875rem 0.9375rem 0.9375rem;
}

/* 二维码按钮 */
.van-button {
    width: 18.125rem;
    height: 2.75rem;
    border-radius: 1.375rem;
    color: #fff;
    font-size: 1.125rem;
}

</style>